<meta meta="Tabbar配置" args="data"/>
<style>

</style>
<div>
    <div class="m-b-xs">
        <div class="btn-group">
            <a href="javascript:;" class="btn btn-default btn-xs"
               s-click="add()">
                <i class="fa fa-plus"></i> 新增
            </a>
        </div>
        <a href="javascript:;" class="btn btn-default btn-xs s-loading-icon "
           s-click="return $tabbarNavList.refresh()">
            <i class="fa fa-refresh s-loading-spinner"></i>
        </a>
        <span class="label label-warning">拖动图标进行排序</span>
    </div>
    <div id="tabbarNavList"
         s='datac,nda'
         s-data-filter="'tabbarNavList'"
         s-data="data">
        <table class="table table-middle table-striped table-hover table-bordered table-condensed" style="width: 100%;">
            <tr>
                <th>图标</th>
                <th>选中图标</th>
                <th>标题</th>
                <th>PUSH</th>
                <th>页面</th>
                <th>色系</th>
                <th class="text-right">操作</th>
            </tr>
            <tbody s="loop" id="quickNavSetting">
            <tr s-loop-role="empty">
                <td colspan="7">
                    <div class="p text-center">
                        未查询到数据
                    </div>
                </td>
            </tr>
            <tr s-loop-role="row" class="data-row" s="datac" s-check-role="i">
                <td s="tpl">
                    <img class="sorthandle" src="{%=this.iconUrl%}" style="max-width: 50px; max-height: 30px;"/>
                </td>
                <td s="tpl">
                    <img src="{%=this.selectedIconUrl%}" style="max-width: 50px; max-height: 30px;"/>
                </td>
                <td>
                    <div name="title"></div>
                </td>
                <td name="pushOpen"></td>
                <td name="page"></td>
                <td name="style"></td>
                <td class="text-right">
                    <input autocomplete="off" type="button" class="btn btn-xs btn-link" s-click="del(this)" value="删除"/>
                    <input autocomplete="off" type="button" class="btn btn-xs btn-link" s-click="edit(this)" value="编辑"/>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    $quickNavSetting.node.sortable({
        handle: ".sorthandle",
        update: function () {
        }
    });

    function edit(s) {
        S.popupOpen("/operation-center/tabbarNav.html", {tabbarNav: s.parent().data()}).done(function (rs) {
            rs && s.parent().data(rs)
        });
    }

    function add() {
        S.popupOpen("/operation-center/tabbarNav.html").done(function (rs) {
            rs && $quickNavSetting.addRow(rs, 'append')
        });
    }

    function del(s) {
        s.node.closest("tr").remove();
    }

    S.getContent = function () {
        var tabbarNavList = [];
        $tabbarNavList.node.find(".data-row").each(function () {
            var tr = $(this);
            var $tr = Smart.of(tr);
            var data = $tr.data();
            tabbarNavList.push(data);
        })
        return {
            tabbarNavList: tabbarNavList
        }
    }
</script>